<template>

  <section v-loading="loading" class="cms-body">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <!-- 查询表单 -->
    <div class="cms-list-header">
      <el-row>
        <el-col :span="12">
          <el-select v-model="params.isChecked" @change="goQuery">
            <el-option label="审核状态" value=''></el-option>
            <el-option label="等待审核" :value="'0'"></el-option>
            <el-option label="审核通过" :value="'1'"></el-option>
            <el-option label="审核不通过" :value="'2'"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <section>
      <header class="header">
        <el-row>
          <el-col :span="8" class="title">
            <span class="contentId">评论ID：{{params.targetId}}</span>
          </el-col>
        </el-row>
      </header>
      <section class="container" v-for="(item,index) in tableData" :key="index">
        <div class="content-container">
          <el-row>
            <el-col :span="18">
              <el-checkbox v-model="checks[index]" @change="check(index)"></el-checkbox>&nbsp;
              <!-- 已回复显示区域 -->
              <el-row class="reply" v-show="tableData[index].replyDisplayDisabled">
                <el-col :span="5">
                  <span class="nbsp">&nbsp;</span>
                  <div class="tip warn tip-right">回复内容:</div>
                </el-col>
                <el-col :span="19">
                  <div class="content-textarea">
                    {{tableData[index].reply}}
                  </div>
                </el-col>
              </el-row>
              <!-- 回复/修改回复框显示区域 -->
              <el-row class="reply" v-show="tableData[index].replyDisabled ">
                <el-col :span="3">
                  <span class="nbsp">&nbsp;</span>
                  <div class="tip warn tip-right">回复内容</div>
                </el-col>
                <el-col :span="19">
                  <div class="reply-textarea">
                    <el-input type="textarea" v-model="replyContent[index]" placeholder="请输入回复内容"></el-input>
                    <div class="btn-group">
                      <el-button class="small-btn submit" @click="submitReply(index,tableData[index].commentId)">提交
                      </el-button>
                      <el-button class="small-btn cancel" @click="cancelReply(index)">取消</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6" class="text-right">
              <p>
                <span class="gray">审核状态：</span>
                <span v-if="tableData[index].isChecked == 0" class="green-color">等待审核</span>
                <span v-else-if="tableData[index].isChecked == 1" class="read-color">审核通过</span>
                <span v-else-if="tableData[index].isChecked == 2" class="gray">审核不通过</span>
              </p>
            </el-col>
          </el-row>
        </div>
        <footer class="footer">
          <el-row>
            <el-col :span="12" class="gray">
              <span style="color: #FFA500"
                    @click="routerLink('/appUser/pageList','pageList',tableData[index].replayUserId)">评论者： {{tableData[index].nickName}}</span>
              <span>评论时间：{{tableData[index].createTime}}</span>
              <span>IP：{{tableData[index].ip}}</span>
            </el-col>
            <el-col :span="12" class="text-right">
              <el-button class="small-btn" @click="goCheck(tableData[index].commentId,1)">审核通过</el-button>
              <el-button class="small-btn" @click="goCheck(tableData[index].commentId,2)">审核不通过</el-button>
              <el-button v-show="tableData[[index]].replyBtnDisabled" class="small-btn" @click="clickReply(index)">
                修改回复
              </el-button>
              <el-button class="small-btn" @click="deleteBatch($api.commentDelete,tableData[index].id)">删除</el-button>
            </el-col>
          </el-row>
        </footer>
      </section>
    </section>

    <!-- 表格底部 -->
    <div class="cms-list-footer">
      <div class="cms-left">
        <el-checkbox v-model="checks[tableData.length]" @change="check(-1)"></el-checkbox>&nbsp;&nbsp;
        <el-button :disabled="disabled" @click="goCheck(ids,1)">审核通过</el-button>
        <el-button :disabled="disabled" @click="goCheck(ids,2)">审核不通过</el-button>
        <el-button :disabled="disabled" @click="deleteBatch($api.commentDelete,ids)">批量删除</el-button>
      </div>
      <div>
        <!-- cms分页组件 -->
        <cms-pagination :total="total" @change="getPages"></cms-pagination>
      </div>
    </div>
  </section>
</template>
<script>
  import listMixins from '@/mixins/list'
  import axios from "axios";
  import {setBaseUrl} from '@/config.js'

  export default {
    mixins: [listMixins],
    data() {
      return {
        globalUrl: setBaseUrl(),
        params: {
          isChecked: '',
          targetId: this.$route.query.id,
          pageNo: 1,
          pageSize: 10,
        },
        info: {},
        checks: [],
        replyContent: [],
        commentContent: [],
        commentTypes: [],
      }
    },
    methods: {
      //修改回复及回复按钮点击事件
      clickReply(index) {
        let obj = this.tableData[index];
        if (this.tableData[index].replyOperate == 'update') {
          this.replyContent[index] = this.tableData[index].reply;
          obj.replyDisplayDisabled = false;
        }
        obj.replyDisabled = true;
        this.$set(this.tableData, index, obj);
      },
      //修改回复中取消按钮点击事件
      cancelReply(index) {
        let obj = this.tableData[index];
        if (this.tableData[index].replyOperate == 'update') {
          obj.replyDisplayDisabled = true;
        }
        obj.replyDisabled = false;
        this.$set(this.tableData, index, obj);
      },
      //修改回复中提交按钮点击事件
      submitReply(index, commentId) {
        let content = this.replyContent[index];
        let obj = this.tableData[index];
        if (content == '' || typeof (content) == 'undefined') {
          this.errorMessage('请填写回复信息');
          return false;
        }
        this.loading = true;
        axios.post(this.$api.commentEditText, {commentId: commentId, reply: content}).then(res => {
          this.loading = false;
          if (res.code == '200') {
            let mes = this.tableData[index].replyOperate == 'update' ? '修改回复成功' : '回复成功';
            this.successMessage(mes);
            obj.reply = this.replyContent[index];
            //回复控制属性
            obj.replyDisabled = false;
            obj.replyDisplayDisabled = true;
            obj.replyBtnDisabled = true;
            if (this.tableData[index].replyOperate == 'reply') {
              obj.replyOperate = 'update';
            }
            this.$set(this.tableData, index, obj);
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      goCheck(ids, status) {
        this.loading = true;
        axios.post(this.$api.commentChecked, {ids: ids, isChecked: status}).then(res => {
          this.loading = false;
          if (res.code == '200') {
            this.successMessage('操作成功');
            this.getTableData();
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      //查询
      goQuery() {
        this.getTableData();
      },
      getTableData() {
        this.loading = true;
        console.log(this.params);
        axios.post(this.$api.commentDetail, this.params).then(res => {
          console.log(res)
          this.loading = false;
          if (res.code == '200') {
            this.tableData = [];
            this.checks = [];
            this.disabled = true;
            this.total = res.totalCount;
            for (let item of res.body) {
              let obj = item;
              let disabled = obj.reply == '' ? false : true;
              let replyOperate = obj.reply == '' ? 'reply' : 'update';
              obj.replyDisplayDisabled = disabled;  //控制当前是否显示回复内容label布局
              obj.replyDisabled = false;            //控制当前是否显示回复textarea布局
              obj.replyBtnDisabled = disabled;      //控制当前显示修改回复或回复按钮
              obj.replyOperate = replyOperate;      //当前操作回复按钮类型reply:回复 update:修改回复
              this.tableData.push(obj);
              this.checks.push(false);
            }
            this.checks.push(false);  //添加最后一个全选checkbox选中状态
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      //checkbox选中触发事件
      check(index) {
        if (index == -1) {
          if (this.checks[this.checks.length - 1]) {
            this.checks = this.checks.map(function (e) {
              return true;
            });
            this.disabled = false;
          } else {
            this.checks = this.checks.map(function (e) {
              return false;
            });
            this.disabled = true;
          }
        } else {
          let checkFlaseCount = 0;
          for (let i = 0; i < this.checks.length - 1; i++) {
            if (this.checks[i]) {
              checkFlaseCount++;
            }
          }
          if (this.checks[index]) {
            this.disabled = false;
            if (checkFlaseCount == this.checks.length - 1) {
              this.checks[this.checks.length - 1] = true;
            }
          } else {
            if (checkFlaseCount > 0) {
              this.disabled = false;
            } else {
              this.disabled = true;
            }
            this.checks[this.checks.length - 1] = false;
          }
        }
        let ids = [];
        for (let i = 0; i < this.checks.length - 1; i++) {
          if (this.checks[i]) {
            ids.push(this.tableData[i].commentId);
          }
        }
        this.ids = ids.join(',');

      },
    },
    created() {
      this.getTableData();
    },
  };
</script>

<style>
  .container {
    width: 100%;
    padding: 20px 24px;
    border-bottom: 1px dashed #e7ecf3;
  }

  .content-container {
    min-height: 60px;
  }

  .header, .container, .gray {
    font-size: 14px;
  }

  .gray {
    display: inline-block;
  }

  .read-color {
    color: red;
  }

  .green-color {
    color: #29D785;
  }

  .small-btn {
    padding: 5px 8px;
    min-width: 50px;
  }

  .header {
    padding: 0px 24px;
    height: 50px;
    line-height: 50px;
    background-color: #F7F7F7;
    box-sizing: border-box;
  }

  .header .el-row {
    border-top: 1px #E7ECF3 solid;
  }

  .header .title {
    overflow: hidden;
    min-width: 300px;
  }

  .header .title a {
    color: #5C93BF;
  }

  .header .contentId {
    color: #acb5bb
  }

  .footer {
    margin-top: 20px;
  }

  .footer .gray span {
    margin-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .content-textarea {
    min-height: 50px;
    line-height: 30px;
  }

  .reply {
    margin-top: 30px;
  }

  .reply-textarea {
    position: relative;
    border: 1px #EEE9DD solid;
    border-radius: 4px;
  }

  .reply-textarea textarea {
    border: 0px;
    resize: none;
  }

  .reply-textarea .btn-group {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }

  .reply-textarea .btn-group span {
    color: #ffffff;
  }

  .reply-textarea .submit {
    background-color: #00AEFF;
  }

  .reply-textarea .cancel {
    background-color: #C7C7C7;
  }

  .comment {
    margin-top: 0px;
  }

  .comment-textarea {
    border: 1px #E7ECF3 solid;
  }

  .nbsp {
    padding-left: 14px;
  }
</style>
